<!--
@Descripttion 国际化语言切换
@version 1.0.0
@Author Bell
@example <LanguageSwitch />
 -->
<template>
  <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        {{$t('button.Language')}}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon><!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="zh-cn">中文</el-dropdown-item>
          <el-dropdown-item command="en">English</el-dropdown-item>
        </el-dropdown-menu>
      </template>
   </el-dropdown>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import baseMixin from '@/mixin/baseMixin'
import { useI18n } from 'vue-i18n'
import { ArrowDown } from "@element-plus/icons-vue";

export default defineComponent({
  name: 'language-switch',
  components: {
    ArrowDown
  },
  props: {},
  setup (props, context) {
    
    // mixins 混入
    const { Router } = baseMixin()
    
    //  本地语言
    const { locale } = useI18n()
    
    /**
     * 语言切换
     */
    const handleCommand = (value) => {
      localStorage.setItem('LOCALE_LANGUAGE', value)
      locale.value = value
      Router.go(0)
    }
    
    return {
      handleCommand
    }
  }
})
</script>
